<style lang="scss" scoped>
    @import '../../css/base-color.scss';
    .out{ width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;}
    .box{width: 450px;height:440px; background: url('http://jhsy-img.caizhu.com/sass/images/ic-phone-bg.png')no-repeat top left;margin: 0 auto; position: fixed;
        left: 50%;
        top: 50%; margin-left: -225px;
        margin-top: -220px;background-color: #fff;}
    .box p{color:#fff;width: 100%;text-align: center;}
    .content{padding: 20px 30px 42px 30px;margin-top: 46px;}

    .up p{color:$mc3;text-align: left;}
    .input-phone{width: 260px;height:42px;  border:none;background: $mcb;  font-size: 14px; color:$mc2;text-indent: 15px;margin-top: 5px;}

    ::-moz-placeholder { color: #afb3c8; }
    ::-webkit-input-placeholder { color:#afb3c8; }
    :-ms-input-placeholder { color:#afb3c8; }

    .button{width:120px;height:42px;  margin-left:10px;background: $mco;color:#fff;font-size: 13px;}

    .down{margin-top: 24px;}
    .down p{color:$mc3;text-align: left;}
    .input-code{width: 390px; height:42px;  border:none;background: $mcb;font-size: 14px; color:$mc2;text-indent: 15px;margin-top: 5px;}

    .btn{color:#fff;font-size: 14px;text-align: center;height:42px;width:390px; background: $mco;margin-top: 58px;}


</style>

<template>
    <section>

        <section class="out">
            <section class="box">
                <p class="fs-18 mt30">绑定手机</p>
                <p class="fs-14 mt10">为了您更好的体验，需要绑定您的手机号</p>
                <section class="content">
                    <section class="up">
                        <p class="fs-14">手机号码</p>
                        <input class="input-phone" type="text" placeholder="请输入手机号码"  v-model="phoneNumber"><el-button class="button" id="button" @click="togetCode">获取验证码</el-button>
                    </section>
                    <section class="down">
                        <p>验证码</p>
                        <input class="input-code" type="text" placeholder="请输入验证码"  v-model="verifyCode">
                    </section>
                    <el-button class="btn" @click="localLogin">登录</el-button>
                </section>
            </section>
        </section>

        <el-dialog
                title="温馨提示"
                :visible.sync="centerDialogVisible"
                width="30%"
                center>
            <p style="text-align: center;">您还不是企业用户，请完成注册后再登录</p>
            <span slot="footer" class="dialog-footer">
            </span>
        </el-dialog>


    </section>
</template>

<script>

	import qs from 'qs'

	export default{
		data: function(){
			return {
				phoneNumber: '',
				verifyCode: '',
				centerDialogVisible:false,

            }
		},
		mixins: [mixinMethods],
		methods: {

			togetCode:function(){
				let self = this;
				let phone = self.phoneNumber;
				if(!phone){
					this.$message.error("请输入手机号");
				}else{
					if(!(/^1[34578]\d{9}$/.test(phone))){
						this.$message.error("手机号码有误，请重填");
						self.phoneNumber = '';
						return false;
					}else{
						let button = document.getElementById('button');

						timeGo(button);
						axios.post('/api/system/sendMobileCode', qs.stringify({
							mobile: self.phoneNumber,
							type: 1,
						})).then( (res) => {
							var d = res.data;
							if(d.flag == 1){

							}else {
								this.centerDialogVisible = true;
								setTimeout(function () {
                                    location.assign('/register/new-login');
								},3000);
//								this.$message.error(d.msg);
							}
						} )
					}
				}
			},

			localLogin(){ /*登录*/
				let self = this;
				let phone = self.phoneNumber;
				let verifyCode = self.verifyCode;
				axios.post('/com/member/bindMobile', qs.stringify({
					mobile: phone,
					code: verifyCode
				})).then( r=>{
					var d = r.data;
					if(d.flag == 1){
						location.assign('/');
					}else{
						this.$message.error(d.msg);
					}

				});
            },

			monitorUrl(){
				if(this.submitFlag == false){
					pushHistory();
					window.addEventListener("popstate", function(e) {
						window.location.assign('/register/new-login');
					}, false);

					function pushHistory() {
						var state = {
							title: "title",
							url: ""
						};
						window.history.pushState(state, "title", "");
					}
				}
			},

		},
		mounted: function(){

			this.monitorUrl();

			/*axios.post('/xxx', qs.stringify({})).then( (res) => {
                var d = res.data;
                if(d.flag == 1){
                    console.log(d);
                }else{
                    this.$message.error(d.msg);
                }
            } );*/
		}
	}

	function timeGo(element){
		var num = 60
		var timer = setInterval(function () {
			num--
			element.innerHTML = num + '秒后重新获取'
			element.style.color = ' #ccc'
			element.disabled = ' disabled'
			if (num === 0) {
				element.disabled = ''
				element.style.color = ' #fff'
				element.innerHTML = '获取验证码'
				clearInterval(timer)
			}
		}, 1000)
	}




</script>